[CSS] place-content 스타일 속성 알아보기

Last Modified : 2023-08-22 / Created : 2023-08-09

1,292
View Count

주소 복사하기

css 속성 중 줄여서 사용이 가능한 shortcut 스타일 속성 중 하나인 place-content에 대하여 알아보려고 합니다.

# CSS place-content 스타일 속성

place-content 속성은 축약 스타일 속성으로 아래의 두 가지 속성을 한 번에 사용할 수 있는 css 속성입니다.

// align-content
// justify-content

위 두 가지 속성은 flexbox의 부모 또는 이웃한 요소와의 상하좌우 레이아웃을 맞추는데 자주 사용되는 속성들입니다. place-content를 사용하면 위 두 속성의 스타일을 각각 따로 선언할 필요 없이 한 번에 사용 가능하다는 장점이 있습니다. 사용 문법은 간략하게 아래와 같습니다.

place-content: <align-content> <justify-content>;

그럼 간단한 예제를 사용하여 실제로 어떻게 사용 가능한지 알아봅니다.

! css place-content 예제 보기

아래는 네모 형태의 여러 개의 요소들을 flex를 사용하여 container 클래스의 내부에 정렬한 모습입니다.

아래는 기본으로 사용된 스타일 속성입니다. flex 레이아웃을 사용하였습니다. 참고로 align-content를 사용하기 위해서 flex-wrap 속성을 추가하였습니다.

.container {
width: 300px;
height: 300px;
border: 1px solid #000;
display: flex;
flex-wrap: wrap;
}
.item {
width: 50px;
height: 50px;
background: #999;
}

이제 각각 아래의 스타일을 적용해 어떻게 나타나는지 확인해보도록 하겠습니다.

1번 예제) align-content와 justify-content를 사용한 예제입니다.

align-content: center;
justify-content: center;

위 스타일을 사용하면 아래와 같이 나타나게 됩니다.

<div class="test">
<div class="container">
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
</div>
</div>

<style>
.test .container {
width: 300px;
height: 300px;
border: 1px solid #000;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
}
.test .item {
width: 50px;
height: 50px;
background: #999;
}
</style>

이번에는 align-content와 justify-content 대신에 place-content를 사용한 모습입니다. 동일한 값을 사용하였으므로 위와 똑같이 나타날 것으로 예상할 수 있습니다.

place-content: center center;

이제 위 코드를 실행하면 다음과 같이 나타나게됩니다.

<div class="test2">
<div class="container">
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
</div>
</div>

<style>
.test2 .container {
width: 300px;
height: 300px;
border: 1px solid #000;
display: flex;
flex-wrap: wrap;
place-content: center center;
}
.test2 .item {
width: 50px;
height: 50px;
background: #999;
}
</style>

위의 예제 두 가지를 비교했을 때 예상한 것과 같이 결과는 동일하다는 것을 확인 할 수 있었습니다. 이처럼 place-content를 사용하면 flex나 grid를 사용한 레이아웃에 두 가지 스타일 속성을 한 번에 사용할 수 있습니다.

여기까지 css 축약 스타일 속성인 place-content에 대하여 간략하게 알아보았습니다.

아래의 글도 찾고 계시지 않나요?

css grid 레이아웃 방법으로 정사각형, 직사각형 만들기

CSS will-change 스타일 속성 알아보기